<template>
  <div class="content">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="crumbs">
      <el-breadcrumb-item>酒店</el-breadcrumb-item>
      <el-breadcrumb-item v-if="$route.query.cityName"
        >{{
          $route.query.cityName.indexOf("市") == -1
            ? $route.query.cityName + "市"
            : $route.query.cityName
        }}酒店预订</el-breadcrumb-item
      >
    </el-breadcrumb>
    <HotelSearch @setCity="changeCityHotel" @city="changeCity" />
    <el-row type="flex" class="map">
      <el-col :span="14">
        <el-row type="flex" class="area">
          <el-col :span="3">区域：</el-col>
          <el-col>
            <el-row :class="isHide ? 'hide' : ''" v-if="data.scenics">
              <span v-for="item in data.scenics" :key="item.id">
                {{ item.name }}
              </span>
            </el-row>
            <el-row>
              <span @click="isHide = !isHide" class="show">
                <i
                  class="el-icon-d-arrow-right"
                  :class="isHide ? 'down' : 'up'"
                ></i>
                等{{ data.scenics ? data.scenics.length : 0 }}个区域
              </span>
            </el-row>
          </el-col>
        </el-row>
        <el-row type="flex" class="price">
          <el-col :span="3">
            均价
            <el-tooltip
              class="item"
              effect="dark"
              content="等级均价由平日价格计算得出，节假日价格会有上浮。"
              placement="top-start"
            >
              <sup
                data-v-0f68b62a=""
                class="question-mark el-tooltip"
                aria-describedby="el-tooltip-2957"
                tabindex="0"
              >
                ?
              </sup>
            </el-tooltip>
            ：
          </el-col>

          <el-col :span="21">
            <el-row type="flex" justify="start">
              <el-col :span="6">
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                ¥332
              </el-col>
              <el-col :span="6">
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                ¥332
              </el-col>
              <el-col :span="7">
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                ¥332
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10">
        <Map :hotelData="hotels" />
      </el-col>
    </el-row>
    <HotelFilter @filter="hotelFilter" />
    <div class="hotels">
      <div v-if="hotels.length == 0" class="notavailable">
        暂无符合条件的酒店
      </div>
      <el-row type="flex" v-else v-for="hotel in hotels" :key="hotel.id">
        <el-col :span="8"
          ><img
            :src="hotel.photos"
            alt=""
            @click="$router.push(`hotel/detail?id=${hotel.id}`)"
        /></el-col>
        <el-col :span="10">
          <h2 @click="$router.push(`hotel/detail?id=${hotel.id}`)">
            {{ hotel.name }}
          </h2>
          <span>
            {{ hotel.alias }}
            <span v-if="hotel.hoteltype.name">
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>
              {{ hotel.hoteltype.name }}
            </span>
          </span>
          <el-row type="flex" class="stars">
            <el-col>
              <el-rate
                v-model="hotel.stars"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
            </el-col>

            <el-col>
              <span class="color">{{ hotel.all_remarks }}</span>
              <span class="black">条评价</span>
              <span class="color">{{ 89 }}</span>
              <span class="black">篇游记</span>
            </el-col>
          </el-row>
          <div>
            <i class="iconfont iconlocation"></i> 位置：{{ hotel.address }}
          </div>
        </el-col>
        <el-col :span="6">
          <el-row
            v-for="data in hotel.products"
            :key="data.id"
            type="flex"
            class="products"
          >
            <el-col>{{ data.name }}</el-col>
            <el-col
              ><span class="color">￥{{ data.price }}</span
              >起
              <i class="el-icon-arrow-right"></i>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
          :current-page="page"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {},
      hotels: [],
      value: 3.7,
      isHide: true,
      total: 0,
      page: 1,
      pageNum: 1,
      cityId: 0,
    };
  },
  created() {},
  mounted() {
    if (this.$route.query.cityName) {
      this.loadCity(this.$route.query.cityName);
    }
    if (!this.$route.query.cityName) {
      window.onLoad = () => {
        AMap.plugin("AMap.CitySearch", () => {
          let citySearch = new AMap.CitySearch();
          citySearch.getLocalCity((status, result) => {
            if (status === "complete" && result.info === "OK") {
              // 查询成功，result即为当前所在城市信息
              // console.log(result);
              this.$confirm("定位当前城市:" + result.city, "提示", {
                confirmButtonText: "确定",
                type: "success",
                showCancelButton: false,
              });
              this.$router.replace("/hotel?cityName=" + result.city);
              this.loadCity(result.city);
            }
          });
        });
      };
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=e5dacc2c74df594a9332bd836b30b897&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = (val - 1) * 10;
      this.page = val;
      let { cityName, ...url } = this.$route.query;
      this.loadHotel({ city: this.cityId, ...url }, "", this.pageNum);
      // console.log(url);
    },
    getUrl(filter) {
      let keys = Object.keys(filter);
      let url = `&price_lt=${filter.price}`;
      keys.forEach((item) => {
        // console.log(filter[item]);
        if (Array.isArray(filter[item]) && filter[item].length > 0) {
          filter[item].forEach((element) => {
            url += `&${item}_in=${element}`;
          });
        }
      });
      this.$router.replace(
        "/hotel?cityName=" + this.$route.query.cityName + url
      );
      this.loadHotel({ city: this.cityId }, url);
    },
    hotelFilter(filter) {
      // console.log(filter);
      this.page = 1;
      this.getUrl(filter);
    },
    loadCity(cityName) {
      this.$axios({
        url: "/cities",
        params: {
          name: cityName,
        },
      }).then((res) => {
        // console.log(res);
        this.data = res.data.data[0];
        this.cityId = res.data.data[0].id;
        console.log(this.cityId);
        this.loadHotel({ city: res.data.data[0].id });
      });
    },
    loadHotel(cityId, url = "", page = 0) {
      this.$axios({
        url: "/hotels" + "?" + url + "&_start=" + page,
        params: cityId,
      }).then((res) => {
        this.hotels = res.data.data;
        this.total = res.data.total;
        console.log(res);
        console.log(this.hotels);
      });
    },
    changeCity(data) {
      console.log(data);
      this.$router.replace("/hotel?cityName=" + data.name);
      this.loadCity(data.name);
      this.cityId = data.id;
      this.loadHotel({ city: data.id });
    },
    changeCityHotel(data) {
      console.log(data);
      this.loadHotel({
        city: data.cityId,
        enterTime: data.date[0],
        leftTime: data.date[1],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  margin: 0 auto;
  width: 1000px;
  .crumbs {
    padding: 20px 0;
    font-size: 14px;
    span {
      margin-right: 14px;
    }
  }
  .area {
    font-size: 14px;
    color: #666;
    .hide {
      height: 42px;
      overflow: hidden;
    }
    span {
      margin-right: 14px;
    }
    .show {
      cursor: pointer;
      i {
        color: rgb(255, 153, 0);
      }
    }
    .up {
      transform: rotate(270deg);
    }
    .down {
      transform: rotate(90deg);
    }
  }

  .price {
    font-size: 14px;
    color: #666;
  }
}
.hotels {
  .el-row {
    padding: 25px 0;
    border-bottom: 1px solid #ccc;
  }
  .stars {
    border: none;
    padding: 20px 0;
    .el-col {
      padding: 0;
    }
  }
  .el-col {
    padding: 0 10px;
    color: #606266;
    img {
      width: 320px;
      height: 210px;
      object-fit: cover;
      cursor: pointer;
    }
    h2 {
      cursor: pointer;
      color: #000;
      font-weight: 400;
    }
  }
}
.iconhuangguan {
  color: rgb(255, 153, 0);
}
.question-mark {
  display: inline-block;
  background-color: #ccc;
  width: 14px;
  line-height: 14px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}
#container {
  width: 200px;
  height: 200px;
}
.map {
  margin-bottom: 30px;
}
.color {
  color: #ff9900;
}
.black {
  color: #000;
}
.notavailable {
  text-align: center;
  margin-top: 20px;
  height: 300px;
}
.products {
  height: 24px;
  padding: 12px 0;
  color: #606266;
}
</style>